import QtQuick 2.0

Rectangle {
    id: root
    height: 34*dp
    width: parent.width

    property string text: ""
    property bool checked: false
    property bool hovered: false

    signal released()

    color: {
        var color
        if(checked && hovered)  { color = "#E8F2FC" }
        else if(checked)        { color = "#F2F9FF" }
        else if(hovered)        { color = "#F8FAFF" }
        else                    { color = "#FFFFFF" }
        return color
    }

    Text{
        x: 12
        anchors.verticalCenter: root.verticalCenter
        text: root.text
        color: checked ? "#1677FF" : "#444444"
        font.pixelSize: config.fontsize
    }
    Image{
        x: parent.width - 34*dp
        height: 34*dp
        width: 34*dp
        source: "qrc:/picture/tick.png"
        visible: checked
    }

    MouseArea{
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onExited: {
            hovered = false
        }onEntered: {
            hovered = true
        }onReleased: {
            root.released()
        }
    }


}
